<template>
    <div class="page_home">
        <common-header :title="'居民信息'" :showBack="false" :backText="address"></common-header>
        <div class="btn-address">{{address}}</div>
        <div class="pages-main" style="height: calc( 100vh - 93px)">
            <section class="every-block-bgcolor every-block-padding">
                <div class="add-btn-box">
                    <div class="add-btn2 translateBlock" @click="$tools.goPage('accoutInfo')">
                        <img src="../../../static/images/family/add-household.png" alt=""/>
                    </div>
                    <div class="add-btn2 translateBlock">
                        <img src="../../../static/images/family/add-resident.png" @click="$tools.goPage('selecthouse')"
                             alt=""/>
                    </div>
                </div>
            </section>
            <section class="search-block every-block-bgcolor every-block-padding">
                <div>
                    <span class="enumeration"></span>
                    <span>居民信息查询</span>
                </div>
                <div style="margin-top: 0.08rem;">
                    <input class="common-input input-search" @focus="hideClass = true" @blur="onBlurInput"
                           v-model="message"
                           placeholder="请输入姓名或者身份证号"/>
                    <div class="translateBlock" style="width: 1.2rem;text-align: center;" @click="searchInfo()">搜索</div>
                </div>
            </section>
            <section class="search-result every-block-bgcolor every-block-padding">
                <span class="enumeration"></span>
                <span>查询结果如下</span>
            </section>
            <div v-if="searchList.length">
                <section class="search-result every-block-bgcolor every-block-padding" v-for="item in searchList">
                    <div>
                        <div class="translateBlock">姓名:{{item.name}}</div>
                        <div class="translateBlock" style="float:right;">{{item.idcardnumber}}</div>
                    </div>
                    <div>
                        <div class="translateBlock" style="width: 1.2rem;vertical-align: top;">
                            地址：
                        </div>
                        <div class="translateBlock" style="line-height: 0.5rem;width: 7.5rem;">{{item.address}}</div>
                    </div>
                    <div class="item-btns">
                        <div class="translateBlock item-btn"
                             @click="$tools.goPage_query('accoutInfo',{familyid:item.familyid})">
                            <img src="../../../static/images/family/icon-browse.png" alt=""/>
                            户信息浏览
                        </div>
                        <div class="translateBlock item-btn"
                             @click="$tools.goPage_query('addmember',{familyid:item.familyid,populationId:item.id})">
                            <img src="../../../static/images/family/icon-edit.png" alt=""/>
                            编辑
                        </div>
                        <div class="translateBlock" @click="deleteInfo(item)">
                            <img src="../../../static/images/family/icon-del.png" alt=""/>
                            删除
                        </div>
                    </div>
                </section>
                <div v-transfer-dom>
                    <confirm v-model="isShowDeleteDialog"
                             :title="'确认删除框'"
                             @on-cancel="onCancel"
                             @on-confirm="onConfirm">
                        <p style="text-align:center;">您确定要删除该数据吗？</p>
                    </confirm>
                </div>
            </div>
            <div v-else style="text-align: center;margin-top: 1.7rem;">
                <img src="../../../static/images/nodata.png" width="200"/>
            </div>
        </div>
        <common-footer v-show="!hideClass"></common-footer>
    </div>
</template>

<script>
    import {Group, Cell} from 'vux'
    import resident from '../../services/resident'
    import user from '../../services/user'

    export default {
        components: {
            Group,
            Cell
        },
        name: 'home',
        data() {
            return {
                hideClass: false,
                docmHeight: document.documentElement.clientHeight,  //一开始的屏幕高度
                showHeight: document.documentElement.clientHeight,   //一开始的屏幕高度
                isShowDeleteDialog: false,
                address: '',
                message: '',
                searchList: '',  // 搜索结果
                deleteId: '',
            }
        },
        watch: {
            showHeight: 'inputType'
        },
        created() {
            this.getUserInfo();
        },
        mounted() {
            this.getInfo()
        },

        methods: {

            // 检测屏幕高度变化
            inputType() {

                if (!this.timer) {
                    this.timer = true
                    let that = this
                    setTimeout(() => {
                        if (that.docmHeight > that.showHeight) {
                            //显示class
                            this.hideClass = true;
                        } else if (that.docmHeight <= that.showHeight) {
                            //显示隐藏
                            this.hideClass = false;
                        }
                        that.timer = false;
                    }, 10)
                }

            },


            onBlurInput(){
                this.hideClass = false;
                window.scroll(0, 0)
            },
            //获取用户信息
            getUserInfo() {
                let _param = this.$tools.invokeUAF('user/info', {
                    regionCode: this.$tools.getMessage('regioncode')
                })
                user.getUserInfo(_param).then(res => {
                    let data = res.data.data;
                    this.$tools.setMessage('userInfo', JSON.stringify(data));
                    this.$tools.setMessage('regioncode', data.regioncode);
                })
            },

            // 获取地址信息
            getInfo() {
                let _param = this.$tools.invokeUAF('region/getDetil', {
                    regionCode: this.$tools.getMessage('regioncode')
                })
                resident.getRegionDetil(_param).then(res => {
                    let data = res.data.data;
                    this.address = data.name;
                })
            },

            // 搜索消息
            searchInfo() {
                let _param = this.$tools.invokeUAF('resident/getPopulationByUniqueIndex', {
                    message: this.message
                })
                resident.getPopulationByUniqueIndex(_param).then(res => {
                    let data = res.data.data;
                    this.searchList = data;
                })

            },

            // 删除
            deleteInfo(item) {
                this.deleteId = item.id;
                this.isShowDeleteDialog = true;
            },
            onCancel() {
                this.isShowDeleteDialog = false;
            },

            onConfirm() {
                this.isShowDeleteDialog = false;
                let _param = this.$tools.invokeUAF('resident/deletePopulationInfo', {
                    populationId: this.deleteId
                })
                resident.deletePopulationInfo(_param).then(res => {
                    this.deleteId = '';
                    this.searchInfo();

                })

            },
        },
    }
</script>

<style lang="less">
    .page_home {
    .nav-hide {
        position: static !important;
    }
    .add-btn-box {
        padding: 0.35rem 0 0.35rem 0;
        justify-content: space-between;
    .add-btn2 {
        width: 4.35rem;
    img {
        width: 4.35rem;
        display: block;
    }
    }
    .add-btn2:first-child {
        margin-right: .35rem;
    }
    }
    .search-block {
        margin-top: 10px;
        padding-top: 0.15rem;
        padding-bottom: 0.2rem;
    .input-search {
        width: 7rem;
        margin-right: .1rem;
    }
    }
    .search-result {
        margin-top: 10px;
        line-height: 1rem;
    }
    .btn-address {
        position: absolute;
        top: 5px;
        left: 0;
        width: 2rem;
        line-height: 1rem;
        font-size: 0.38rem;
        color: #fff;
        text-align: center;
        background: url('../../../static/images/icon-left.png') no-repeat;
        padding-right: 5px;
        background-position: right;
        background-size: 20%;
    }
    }
</style>
